<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/1
  Time: 10:57
  To change this template use File | Settings | File Templates.
--%>

<%--
  Created by IntelliJ IDEA.
  User: Superior
  Date: 2019/7/25
  Time: 16:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.scau.ums.model.User" %>
<html class="no-js" lang="en">
<script src="js/jquery-3.2.1min.js"></script>
<head>
    <title>填写材料</title>
</head>
<script>
    function AddMaterialForm(){
        var ikey =  $("#main").data("ikey");
        if(ikey>1){
            ikey++;
        }else{
            ikey=2;
        }
        $("#main").data("ikey",ikey);
        var content = '<form id="form'+ikey+'">\n' +
            "    <div class=\"blog-main-wrapper section-padding\">\n" +
            "        <div class=\"container\">\n" +
            "            <div class=\"row\">\n" +
            "                <div class=\"col-lg-9 order-1\">\n" +
            "                    <div class=\"blog-item-wrapper\">\n" +
            "                        <!-- 用户报修单提交开始 -->\n" +
            "                        <div class=\"blog-comment-wrapper\">\n" +
            "                            <h5>用户报修单提交</h5>\n" +
            "                                <div class=\"comment-post-box\">\n" +
            "                                    <div class=\"row\">\n" +
            "\n" +
            "                                        <div class=\"col-lg-6 col-md-6\">\n" +
            "                                            <label>任务ID</label>\n" +
            "                                            <input name=\"repairorderid\" class=\"coment-field\" readonly=\"readonly\" value=\"${repairTaskOrder.getId()}\">\n" +
            "                                        </div>\n" +
            "\n" +
            "                                        <div class=\"col-lg-6 col-md-6\">\n" +
            "                                            <label>物品名称</label>\n" +
            "                                            <input type=\"text\" class=\"coment-field\" name=\"name\" placeholder=\"物品名称\"  value=\"无\">\n" +
            "                                        </div>\n" +
            "\n" +
            "\n" +
            "                                        <div class=\"col-lg-6 col-md-6\">\n" +
            "                                            <label>数量</label>\n" +
            "                                            <input name=\"number\" class=\"coment-field\" placeholder=\"数量\" value=\"0\">\n" +
            "                                        </div>\n" +
            "\n" +
            "                                        <div class=\"col-lg-6 col-md-6\">\n" +
            "                                            <label>花销</label>\n" +
            "                                            <input name=\"cost\" class=\"coment-field\"  placeholder=\"花销\" value=\"0\">\n" +
            "                                        </div>\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                            </form>\n" +
            "                        </div>\n" +
            "                        <!-- 用户报修单提交结束 -->\n" +
            "\n" +
            "                    </div>\n" +
            "                </div>\n" +
            "            </div>\n" +
            "        </div>\n" +
            "    </div>\n" +
            "    </div>";
        $("#main").append(content);
    }
</script>

<script>
    function FillRepairMaterial(){
        var ikey =  $("#main").data("ikey");
        if(ikey>1){}else{ikey=1;}
        for (var i=0;i<ikey;i++){
            var k=i+1;
            var array = $("#form"+k).serializeArray();
            var repairMaterial={};
            for(var j=0;j<array.length;j++){
                repairMaterial[array[j].name] = array[j].value;
            }
            $.ajax({
                url:"FillRepairMaterial",
                data:JSON.stringify(repairMaterial),
                dataType:"json",
                contentType:"application/json;charset=UTF-8",
                type:"post",
            })
        }
        alert("提交成功！");
        window.location.href="/RepairMaterial";
    }
</script>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Home</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrapmin.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="/css/font-awesomemin.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="/css/slickmin.css">
    <!-- animate css -->
    <link rel="stylesheet" href="/css/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="/css/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="/css/jqueryuimin.css">
    <!-- main style css -->
    <link rel="stylesheet" href="/css/style.css">

    <!--notification样式-->
    <style type="text/css">
        .notification {
            /*width: 360px;*/
            /*height: 110px;*/
            /*z-index: 9000;*/
            /*position: fixed;*/
            /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
            /*padding: 20px;*/
            /*margin: 0.5rem 0 1rem 0;*/
            /*border-radius: 2px;*/
            /*background-color: #fff;*/
        }

        .notification .dismiss {
            top: 10px;
            right: 10px;
            width: 20px;
            height: 20px;
            color: #fff;
            text-align: center;
            line-height: 20px;
            overflow: hidden;
            position: absolute;
            background-color: #B8B8B8;
            border-radius: 50%;
        }

        .notification .illustration {
            margin-right: 20px;
            float: left;
        }

        .notification .illustration img {
            border-radius: 50%;
        }

        .notification .text .title {
            font-size: 18px;
            font-weight: bold;
        }

    </style>

    <!--notification.js样式-->
    <script>

        Notification = window.Notification || {};

        Notification = function () {

            'use strict';

            var number = 0;
            var incPosition = 0;

            var template = function (title, text, image, position) {
                incPosition = number * 120;
                number = number + 1;
                var textHtml = '<div class="text">' + text + '</div>';
                var titleHtml = (!title ? '' : '<div class="title">' + title + '</div>');
                var imageHtml = (!image ? '' : '<div class="illustration"><img src="' + image + '" width="70" height="70" /></div>');
                var style;
                switch (parseInt(position, 10)) {
                    case 1:
                        style = "top:" + incPosition + "px; left:20px;";
                        break;
                    case 2:
                        style = "top:" + incPosition + "px; right:20px;";
                        break;
                    case 3:
                        style = "bottom:" + incPosition + "px; right:20px;";
                        break;
                    case 4:
                        style = "bottom:" + incPosition + "px; left:20px;";
                        break;
                    default:
                        ;
                }
                return {
                    id: number,
                    content: '<div style="undefinedposition: ;position: fixed;top: 15px;z-index: 33;width: 360px;height: 85px;background: wheat;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)" class="notification notification-' + number + ' " style="' + style + '">' +
                        '<div class="dismiss">&#10006;</div>' +
                        imageHtml +
                        '<div class="text">' + titleHtml + textHtml + '</div>' +
                        '</div>'
                };
            };

            var hide = function (id) {
                $(document).find('.notification-' + id).remove();
                number = number - 1;
            };

            var create = function (title, text, image, animation, position, delay) {
                var notification = template(title, text, image, position);
                $(notification.content).addClass('animated ' + animation).appendTo('body');
                if (!delay) {
                    delay = 2;
                }
                setTimeout(function () {
                    hide(notification.id);
                }, 1000 * delay);
            };

            return {
                create: create
            };

        }();

    </script>
    <%--"我的"按钮判断跳转--%>
    <script>
        function wodeRedirect() {
            var jsUserType = '<%=request.getSession().getAttribute("USER_TYPE")%>';
            if(jsUserType=='<%=User.ADMIN%>')
            {
                window.location.href="/adminEntrance";
            }
            if(jsUserType=='<%=User.MAINTAINER%>')
            {
                window.location.href="/maintainerEntrance";
            }
            if(jsUserType=='<%=User.STUDENT%>'||jsUserType=='<%=User.TEACHER%>')
            {
                window.location.href="/userEntrance";
            }
        }
    </script>
</head>

<body>

<header class="header-area">
    <!-- header 开始 -->
    <div class="main-header d-none d-lg-block">
        <!--顶部条开始-->
        <div class="header-top black-bg">
            <div class="container">
                <!--界面布局设计-->
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="top-left-navigation">
                            <ul class="nav align-items-center">
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex justify-content-end">
                        <div class="header-social-link">
                        </div>
                        <ul class="user-info-block">
                            <!--登录开始-->
                            <%if (request.getSession().getAttribute("USER_NAME")==null){%>
                            <li><a href="/login"><i class="fa fa-sign-in"></i> 登录</a></li>
                            <%}else{%>
                            <ul class="nav">
                                <!--登录开始-->
                                <li class="mini-cart-wrap">
                                    <a href="#" class="minicart-btn">
                                        <span class="fa fa-user-circle-o"></span>
                                        <% String username=(String)request.getSession().getAttribute("USER_NAME");System.out.println(username);out.print(username);%>
                                        <span id="notification" class="notification" style="top: -5px;
                                                      right: 40px;
                                                      position: absolute;
                                                      width: 18px;
                                                      height: 18px;
                                                      text-align: center;
                                                      line-height: 18px;
                                                      font-size: 10px;
                                                      color: #fff;
                                                      border-radius: 50%;
                                                      background-color: #87b106;"></span>
                                    </a>

                                    <!--websocket实时接收消息-->
                                    <script>
                                        $(function () {
                                            transferCircleNumber();
                                        })

                                        var websocket = null;
                                        //判断当前浏览器是否支持WebSocket
                                        if ('WebSocket' in window) {
                                            websocket = new WebSocket("ws://192.168.49.61:8080/websocket/<%=request.getSession().getAttribute("USER_ID")%>");
                                        }
                                        else {
                                            console.log('当前浏览器不支持 websocket')
                                        }

                                        //连接发生错误的回调方法
                                        websocket.onerror = function () {
                                            console.log("WebSocket连接发生错误");
                                        };


                                        //连接成功建立的回调方法
                                        websocket.onopen = function () {
                                            console.log("WebSocket连接成功"+<%=request.getSession().getAttribute("USER_ID")%>);
                                        }


                                        //接收到消息的回调方法
                                        websocket.onmessage = function (event) {
                                            // console.log(event.data);
                                            $("#flipInX").click();
                                            // alert("管理员给您发送了一条消息："+event.data);
                                            transferCircleNumber();

                                        }


                                        //连接关闭的回调方法
                                        websocket.onclose = function () {
                                            console.log("WebSocket连接关闭");
                                        }


                                        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                                        window.onbeforeunload = function () {
                                            closeWebSocket();
                                        }


                                        //关闭WebSocket连接
                                        function closeWebSocket() {
                                            websocket.close();
                                        }

                                    </script>

                                    <!--转换圆心数字-->
                                    <script>
                                        function transferCircleNumber() {
                                            $.ajax({
                                                type: "GET",
                                                url: "countMessage",
                                                dataType: "json",
                                                success: function (data) {
                                                    document.getElementById("notification").style.display = "block";
                                                    if (data == 0) {
                                                        document.getElementById("notification").style.display = "none";
                                                    }
                                                    document.getElementById("notification").innerText = data;
                                                    // noticeSum = data;
                                                },
                                                error: function () {
                                                    alert("ajax传送失败");
                                                }
                                            })
                                        }
                                    </script>

                                    <!--两个按钮开始-->
                                    <div class="cart-list-wrapper">
                                        <div class="minicart-button">
                                            <a onclick="wodeRedirect()"><i class="fa fa-user-plus"></i> 我的</a>
                                            <a href="/logout"><i class="fa fa-user-times"></i> 注销</a>
                                            <!--当管理员发消息时，会自动触发此按钮，相应的，会触发对应绑定的click事件，此按钮默认隐藏-->
                                            <button id="flipInX" class="notify btn" value="flipInX" style="display:none">flipInX</button>
                                            <script>
                                                var position=100;
                                                $("#flipInX").click(function (event) {
                                                    Notification.create(
                                                        // Title
                                                        "消息",
                                                        // Text
                                                        "您有一条新的消息",
                                                        // Illustration
                                                        "img/user.jpg",
                                                        // Effect
                                                        $(event.target).text(),
                                                        // Position
                                                        position
                                                    );
                                                });
                                            </script>
                                        </div>
                                    </div>
                                    <!--两个按钮结束-->
                                </li>
                                <!--登录结束-->
                            </ul>
                            <%}%>
                            <!--登录结束-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--顶部条结束-->

        <!-- 顶部中间开始 -->
        <div class="header-main-area black-soft sticky">
            <div class="container">
                <div class="row align-items-center position-relative">
                    <!-- logo展示开始 -->
                    <div class="col-auto">
                        <div class="logo">
                            <a href="/">
                                <img src="/img/2.jpg" style="margin-bottom:58px" alt="Brand Logo">
                            </a>
                        </div>
                    </div>
                    <!-- logo展示结束 -->

                    <!-- 顶部标签栏开始 -->
                    <div class="col-auto position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- 标签栏开始 -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li class="active"><a href="/">主页 <i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <li><a href="#">信息服务 <i class="fa fa-angle-down"></i></a>
                                            <ul class="dropdown">
                                                <li><a href="/getlist">失物招领 <i class="fa fa-align-center"></i></a>
                                                </li>
                                                <li><a href="/new_suggestion">发表建议 <i class="fa fa-align-center"></i></a>
                                                </li>
                                                <li><a href="#">新闻动态 <i class="fa fa-align-center"></i></a>
                                                </li>
                                                <li><a href="#">更多 <i class="fa fa-align-center"></i></a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="/repairreport">报修服务 <i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <li><a href="#">校园短信通<i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <li><a href="#">联系我们</a></li>
                                    </ul>
                                </nav>
                                <!-- 标签栏结束 -->
                            </div>
                        </div>
                    </div>
                    <!-- 顶部标签栏结束 -->

                </div>
            </div>
        </div>
        <!-- 顶部中间结束 -->
    </div>
    <!-- header 结束 -->
</header>
<main>

    <!-- 导航图片开始 -->
    <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="img/6.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h3 class="breadcrumb-title">高校后勤综合信息管理平台</h3>
                            <ul class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="/repairreport">报修服务</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航图片结束 -->

    <!-- 报修单style开始 -->
    <div id="main">
    <div class="blog-main-wrapper section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 order-1">
                    <div class="blog-item-wrapper">
                        <!-- 用户报修单提交开始 -->
                        <div class="blog-comment-wrapper">
                            <h5>用户报修单提交</h5>
                            <form id="form1">
                                <div class="comment-post-box">
                                    <div class="row">

                                        <div class="col-lg-6 col-md-6">
                                            <label>任务ID</label>
                                            <input name="repairorderid" class="coment-field" readonly="readonly" value="${repairTaskOrder.getId()}">
                                        </div>

                                        <div class="col-lg-6 col-md-6">
                                            <label>物品名称</label>
                                            <input type="text" class="coment-field" name="name" placeholder="物品名称"  value="无">
                                        </div>


                                        <div class="col-lg-6 col-md-6">
                                            <label>数量</label>
                                            <input name="number" class="coment-field" placeholder="数量" value="0">
                                        </div>

                                        <div class="col-lg-6 col-md-6">
                                            <label>花销</label>
                                            <input name="cost" class="coment-field"  placeholder="花销" value="0">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- 用户报修单提交结束 -->

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 报修单style结束 -->

    <div class="col-12">
        <div class="coment-btn" >
            <button class="btn btn-sqr" onclick="FillRepairMaterial()">提交</button>
            <button  class="btn btn-sqr" onclick="AddMaterialForm()">添加</button>
        </div>
    </div>


</main>

<!-- 底部开始 -->
<footer class="black-bg">
    <div class="footer-middle-area">
        <div class="container">
            <div class="row mtn-30">
                <div class="col-lg-6 col-sm-12">
                    <div class="address-block mt-30">
                        <div class="footer-logo">
                            <a href="#">
                                <img src="/img/2.jpg" alt="Brand Logo">
                            </a>
                        </div>
                        <address class="address-info d-flex align-items-center">
                            <i class="fa fa-map-marker"></i>
                            <p><span>ADDRESS : </span> 梦翔大厦</p>
                        </address>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-envelope"></i>
                        <p><span>EMAIL : </span><a href="#">xxxx@qq.com</a></p>
                    </address>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-phone"></i>
                        <p><span>PHONE : </span><a href="#">158xxxxx9442</a></p>
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom-area text-center">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="payment-method-list">

                    </div>

                    <p class="copyright">
                        Copyright © www.xxx.com
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- 底部结束 -->


<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="/js/modernizr-3.6.0min.js"></script>
<!-- jQuery JS -->
<script src="/js/jquery-3.3.1min.js"></script>
<!-- Popper JS -->
<script src="/js/poppermin.js"></script>
<!-- Bootstrap JS -->
<script src="/js/bootstrapmin.js"></script>
<!-- slick Slider JS -->
<script src="/js/slickmin.js"></script>
<!-- Countdown JS -->
<script src="/js/countdownmin.js"></script>
<!-- Nice Select JS -->
<script src="/js/nice-selectmin.js"></script>
<!-- jquery UI JS -->
<script src="/js/jqueryuimin.js"></script>
<!-- Image zoom JS -->
<script src="/js/image-zoommin.js"></script>
<!-- image loaded js -->
<script src="/js/imagesloadedpkgdmin.js"></script>
<!-- masonry  -->
<script src="/js/masonrypkgdmin.js"></script>
<!-- mailchimp active js -->
<script src="/js/ajaxchimp.js"></script>
<!-- contact form dynamic js -->
<script src="/js/ajax-mail.js"></script>
<!-- google map api -->
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCfmCVTjRI007pC1Yk2o2d_EhgkjTsFVN8"></script>
<!-- google map active js -->
<script src="/js/google-map.js"></script>
<!-- Main JS -->
<script src="/js/main.js"></script>
</body>

</html>

